.button {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: var(--swm-button-size);
  padding: 0 12px;
  background: none;
  border: 0px solid transparent;
  border-radius: 10px;
  color: var(--swm-button);
  background-color: var(--swm-button-background);
  transition: all 200ms 0ms ease-in-out;
  user-select: none;
  gap: 8px;
}

.button:disabled {
  cursor: default;
  pointer-events: none;
  color: var(--swm-button-disabled);
  background-color: transparent;
}

.button:hover {
  background-color: var(--swm-button-hover);
}

.button:active {
  color: var(--swm-button-active);
  background-color: var(--swm-button-active-background);
  transform: scale(0.9);
}

.button:focus {
  box-shadow: var(--swm-focus-outline);
}

.button-selected {
  color: var(--swm-button-selected);
  background-color: var(--swm-button-selected-background);
}

.button-selected:hover {
  color: var(--swm-button-selected-hover);
  background-color: var(--swm-button-selected-hover-background);
}

.button-secondary {
  color: var(--swm-button-secondary);
  background-color: var(--swm-button-secondary-background);
}

.button-secondary:hover {
  background-color: var(--swm-button-secondary-hover);
}

.button-ternary {
  color: var(--swm-button-ternary);
  background-color: var(--swm-button-ternary-background);
}

.button-ternary:hover {
  background-color: var(--swm-button-ternary-hover);
}

.button-absolute {
  position: absolute;
}

.button-replay:hover {
  background-color: var(--swm-button-replay-hover);
}

.vscode-high-contrast .button {
  border: var(--swm-dropdown-border);

  &:hover {
    color: var(--swm-active-item);
  }
}
